<template>
  <div>
    <el-form ref="form">
      <div class="content-style">
        <h1 class="type-title">选择认证类型</h1>
        <div class="type-content">
          <el-row :gutter="20">
            <el-col :span="6" v-for="(item, $index) in organize_list" 
                :key='item.id'
                :class="{'active': activeId==item.ipCateId}"
                >
              <div class="grid-content bg-purple" @click="selectStyle(item, $index)">
                <div class="type-head">
                  <img :src="item.pcImgUrl">
                </div>
                <div class="type-subtitle"> {{item.cateName}} </div>
                <div class="type-desc"> {{item.remarks}} </div>
                <div class="type-select" :style="{'display': activeId==item.ipCateId?'block':''}"><img src="/static/images/organize/type-select.png"></div>
              </div>
            </el-col>
          </el-row>
        </div> 
        <div class="btn-list">
            <router-link to='/organize/protocol'>
              <el-button class="btn-organize">上一步</el-button>
            </router-link>
            <router-link :to="!checked?'':'/organize/message/'+ activeId">
              <el-button class="btn-organize" type="primary" :disabled="!checked">下一步</el-button>
            </router-link>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import { VuecookieGet } from 'utils/cookie'
export default {
  props: {
    activeChange: {
      type: Function
    }
  },
  data () {
    return {
      activeId: '' || this.$route.query.activeId,
      checked: false
    }
  },
  created () {
    this.activeChange(3)
  },
  methods: {
    selectStyle (item, index) {
      this.activeId = item.ipCateId
      this.checked = true // 判断只有选择才能进行下一步
    }
  },
  computed: {
    ...mapGetters({
      organize_list: 'organize_list' // 获取组织类型列表
    })
  },
  mounted () {
    this.$store.dispatch('organize_list', {userId: VuecookieGet('htxk_userId')})
    if (this.$route.query.activeId) {
      this.checked = true // 判断只有选择才能进行下一步
    }
    window.scrollTop = document.scrollTop = document.documentElement.scrollTop = document.body.scrollTop = 0
  }
}
</script>

<style lang="scss" scoped>
.content-style {
  min-height: 680px
}

.type-content{
  width: 1040px;
  margin: 0 auto;
  margin-top: 70px;
}

.type-title {
  font-size: 24px;
  line-height: 30px;
  padding-top: 50px;
  text-align: center;
  font-weight: bold
}

.el-col-6 {
  width:240px;
  height: 352px;
  margin-left:20px;
  border: 1px solid #fff;
  cursor: pointer;
  &:hover {
    border: 1px solid #ebf0f5;
  }
}

.type-head {
  margin-top: 40px;
  text-align: center;
  img {
    width: 108px;
    height: 108px;
  }
}

.type-subtitle {
  font-size: 20px;
  margin: 14px 0 24px;
  text-align: center;
}

.type-desc {
  font-size: 12px;
  line-height: 24px;
  color: #999;
  overflow: hidden;
  margin: 0 37px;
}

.active {
  background: #fafafa;
  border: 1px solid #ebf0f5;
}

.type-select {
    width: 32px;
    height: 31px;
    display: none;
    margin: 36px auto 0;
}

.el-form-item {
  text-align: center;
  margin-top: 70px;
}

.btn-list {
	height: 80px;
	margin: 50px 0;
	text-align: center;
}
</style>
